/**
 * @file
 * @auth jinguangguo
 * @date 2016/12/28
 */

.comp-confirm {
    $color-border: #e6e6e6;
    $color-orange: #ff6e0d;
    $zIndex_modal: 90;
    opacity: 0;
    transition: all 0.1s ease;
    background-color: #fff;
    &--show {
        display: block;
    }
    &--animate {
        opacity: 1;
    }
    @mixin shadow {
        box-shadow: 2px 2px 8px rgba(125, 125, 125, 0.5);
    }
    %commonArrow {
        position: absolute;
        left: -9999em;
        top: -9999em;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 6px;
        z-index: $zIndex_modal;
    }
    .arrow {
        @extend %commonArrow;
        &:after {
            @extend %commonArrow;
            content: " ";
        }
        &--enter {
            opacity: 0;
        }
        &--enter-active {
            transition: opacity 0.2s ease-out;
        }
        &.top {
            top: -7px;
            right: 20px;
            border-bottom-width: 0;
            border-top-color: rgba(0,0,0,.25);
            &:after {
                top: -7px;
                left: -6px;
                border-bottom-width: 0;
                border-top-color: #fff;
            }
        }
        &.bottom {
            top: -7px;
            right: 20px;
            border-top-width: 0;
            border-bottom-color: #999;
            border-bottom-color: rgba(0,0,0,.25);
            &:after {
                top: 1px;
                margin-left: -6px;
                border-top-width: 0;
                border-bottom-color: #fff;
            }
        }
        .body-box {
            position: absolute;
            left: -152px;
            top: -96px;
            width: 160px;
            height: 80px;
            border: 1px solid rgba(0,0,0,.2);
            @include shadow;
            border-radius: 4px;
            background-color: #fff;
            padding-top: 8px;
            text-align: center;
            z-index: $zIndex_modal;
            .content {
                padding: 8px 16px;
                line-height: 2;
                word-break: break-all;
                font-weight: bold;
                color: #333;
            }
            .footer1 {
                padding-bottom: 24px;
                .btn-group {
                    text-align: center;
                    > .ui-btn {
                        width: inherit;
                        min-width: inherit;
                        height: 24px;
                        line-height: 24px;
                        margin-right: 10px;
                        &.ui-btn--default{
                            color: #999;
                            &:hover{
                                color: #333;
                            }
                        }
                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
    }
}